<!--
 * @FilePath: myTable.vue
 * @Author: 杜芬
 * @Date: 2023-07-25 15:15:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-07-25 17:09:30
 * Copyright: 2023 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 页面
-->
<template>
  <div class="table">
    <!-- input框 -->
    <div class="ipt">
      <el-input v-model="input" placeholder="请输入内容" style="width: 280px" clearable></el-input>
      <el-button type="primary" @click="clickSearch">查询</el-button>
    </div>

    <!-- table 表格 -->
    <el-table :data="tableData" stripe style="width: 100% right:300px">
      <el-table-column type="index" label="序号" style="width: 50px"> </el-table-column>
      <el-table-column prop="city" label="地区"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <!-- <el-table-column prop="address" label="地址"> </el-table-column> -->
      <el-table-column prop="num" label="完成率">
        <template slot-scope="scope">
          <div class="progress">
            <div class="progress-item">
              <el-progress
                type="line"
                :percentage="scope.row.num"
                :color="color"
                :text-inside="true"
                :stroke-width="18"
              ></el-progress>
            </div>
            <div>{{ scope.row.num }} %</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="fenye">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input: '',
      color: '',
      currentPage: 4,
      total: 4,
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          city: '南京',
          num: 99,
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          city: '南京',
          num: 86,
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          city: '南京',
          num: 60,
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          city: '南京',
          num: 30,
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
    };
  },
  methods: {
    // 分页
    handleSizeChange() {},
    handleCurrentChange() {},
    // 查看
    handleClick() {},
    // 查询
    clickSearch() {},
  },
};
</script>
<style lang="scss" scoped>
.table {
  width: 100%;
  height: 100%;
  .fenye {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
